/** 动画库 https://animate.style/ */
// 路由组件
.router-transition-enter-active,
.router-transition-leave-active {
    transition: all 0.3s ease-in-out;
}

.router-transition-enter-active {
    transition-delay: 0.25s;
}

.router-transition-top {
    transform: translateY(-30px);
    opacity: 0.001;
}

.router-transition-right {
    transform: translateX(30px);
    opacity: 0.001;
}

.router-transition-bottom {
    transform: translateY(30px);
    opacity: 0.001;
}

.router-transition-left {
    transform: translateX(-30px);
    opacity: 0.001;
}

.router-transition-small {
    transform: scale3d(0, 0, 0);
    opacity: 0.001;
}

.router-transition-large {
    transform: scale3d(1.2, 1.2, 1.2);
    opacity: 0.001;
}

// 面包屑
.breadcrumb-enter-active {
    transition: all 0.2s ease-in-out;
}

.breadcrumb-leave-active {
    transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.breadcrumb-enter-active {
    transition-delay: 0.16s;
}

.breadcrumb-enter-from,
.breadcrumb-leave-to {
    transform: translateX(30px);
    opacity: 0;
}

// 菜单搜索
.searchMean-enter-active {
    animation: bounce-enter 0.4s;
}

@keyframes bounce-enter {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(0);
        opacity: 0.08;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.searchMean-leave-active {
    animation: bounce-leve 0.2s;
}

@keyframes bounce-leve {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0.08;
    }
}